<template>
  <div>
    <van-nav-bar
      title="支付订单"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-contact-card
      :type="type"
      :name="currentContact.name"
      :tel="currentContact.tel"
      @click="onEdit"
    />
    <div class="content">
      <van-card
        :num="item.items[0].wantBuy"
        :price="item.items[0].price"
        :title="item.items[0].name"
        :thumb="item.items[0].imgs.split('||')[0]"
      />
      <van-submit-bar :price="item.items[0].price*item.items[0].wantBuy*100" button-text="支付"  @submit="onSubmit"> </van-submit-bar>
    </div>
  </div>
</template>

<script>
import { getAddress, updateOrder } from '@api/home'
import { Dialog, Toast } from 'vant'
export default {
  name: 'order',
  data () {
    return {
      currentContact: {
        name: '',
        tel: ''
      },
      type: '',
      item: {
        contact: {},
        items: [],
        id: Date.now()
      }
    }
  },
  created () {
    this.address()
  },
  methods: {
    onSubmit () {
      this.$dialog.confirm({
        title: '支付',
        message: '确认支付?'
      })
        .then(() => {
          if (this.currentContact.name === '') {
            return Toast.fail('添加联系人')
          }
          this.item.items = []
          this.item.items.push(JSON.parse(localStorage.getItem('ls')))
          this.item.contact = this.$store.state.Order.data.contact
          this.data = []
          var data = {}
          data.data = {}
          data.data.items = this.item.items
          data.data.id = this.item.id
          data.data.contact = this.item.contact
          // json解析有问题
          delete data.data.items[0].detailinfo
          updateOrder(data).then(res => {
            if (res.data.code === 200) {
              this.$router.replace('/home')
              this.$toast('生成订单成功')
              localStorage.removeItem('ls')
            } else {
              this.$toast('提交订单失败')
            }
          })
        })
        .catch(() => {
          this.$toast('暂未支付')
        })
    },
    onClickLeft () {
      localStorage.removeItem('ls')
      this.$router.go(-1)
    },
    onEdit () {
      this.$router.push('/contactlist')
    },
    address () {
      this.item.items.push(JSON.parse(localStorage.getItem('ls')))
      getAddress().then((res) => {
        // 有地址hasOwnProperty
        if (this.$store.state.Order.data.contact && this.$store.state.Order.data.contact.hasOwnProperty('name') && this.$store.state.Order.data.contact.name !== '') {
          this.currentContact = this.$store.state.Order.data.contact
        } else {
          if (res.data.data.length) {
            var base = res.data.data
            var index = base.filter((element) => {
              return JSON.parse(element.content).isDefault
            })
            if (index.length) { // 走默认
              this.currentContact = JSON.parse(index[0].content)
            } else { // 无默认
              this.currentContact = JSON.parse(base[0].content)
            }
            this.type = 'edit'
          } else {
            this.type = 'add'
          }
        }
        this.$store.commit('Order/change_contact', this.currentContact)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  margin-bottom: 50px;
}
</style>
